﻿<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>首页</title>
    <meta name="keywords" content="关键字" />
    <meta name="description" content="网站描述" />
    <meta name="renderer" content="webkit">
    <meta name="force-rendering" content="webkit">
    <!-- <link rel="icon" href="favicon.ico" mce_href="favicon.ico" type="image/x-icon"> -->
    <!-- <link rel="shortcut icon" href="favicon.ico" mce_href="favicon.ico" type="image/x-icon"> -->
    <link rel="stylesheet" th:href="@{/liuan/css/style.css}">
    <!--页面样式-->
    <link rel="stylesheet" th:href="@{/liuan/css/Swiper.css}">
    <!--页面样式-->
    <link rel="stylesheet" th:href="@{/liuan/css/animate.min.css}">
    <!--CSS3动画库-->
    <link rel="stylesheet" th:href="@{/liuan/css/font-awesome.min.css}">
</head>

<body>
    <div class="top">
        <div class="wid">
            <div class="top-fr fr">
                <div class="select fl">
                    <div class="search fl">
                        <input type="text" placeholder="请输入关键字">
                        <button></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="nav">
        <div class="wid">
            <div class="nav-col">
                <ul>
                    <li class="acti">
                        <a th:href="@{/}">
                            首页
                        </a>
                    </li>

                    <li th:each="category:${CATEGORY_LIST}">
                        <a th:if="${category.sort<100}" th:href="${'/blog/liuan/category/' + category.id}">
                            [[${category.name}]]
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="wid">
            <div class="news">
                <div class="news-col">
                    <div class="news-bann fl">
                        <ul>
                            <li th:each="slider:${SLIDER_LIST}">
                                <a th:href="${'/blog/article/' + slider.id}">
                                    <div class="imgs">
                                        <img th:src="${slider.sliderImg}" alt="">
                                    </div>
                                    <div class="text">
                                        [[${slider.title}]]
                                    </div>
                                </a>
                            </li>
                        </ul>
                        <div class="pagination">
                            <span th:each="slider:${SLIDER_LIST}" th:class="${sliderStat.index eq 0 ? 'acti' : ''}"></span>
                        </div>
                    </div>
                    <div class="news-list fr">
                        <div class="tit">
                            <div class="tabs fl">
                                <ul>
                                    <li th:each="cate:${categoriesWithArticles}" th:if="${cate.sort ge 100 && cate.sort lt 200}" th:class="${cateStat.index eq 0 ? 'acti' : ''}">[[${cate.name}]]</li>
                                </ul>
                            </div>
                            <div class="more fr">
                                <a href="#">更多>></a>
                            </div>
                        </div>
                        <div class="content">
                            <div class="list" th:each="cate:${categoriesWithArticles}" th:if="${cate.sort ge 100 && cate.sort lt 200}" th:class="${cateStat.index eq 0 ? 'list show' : 'list'}">
                                <h2 class="wosdhdaf textflow" th:each="art:${cate.articles}" th:if="${artStat.index eq 0}">[[${art.title}]]</h2>
                                <ul>
                                    <li th:each="art:${cate.articles}" th:if="${artStat.index gt 0}">
                                        <a href="#">
                                            <span>
                                                [[${art.title}]]
                                            </span>
                                            <i>
                                                [[${art.date}]]
                                            </i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="home-bann">
                <img src="./img/ju3_08.jpg" alt="">
            </div>
            <div class="clear">
                <div class="fl leftPart">
                    <div class="news-common">
                        <div class="news-list">
                            <div class="tit">
                                <div class="tabs fl">
                                    <ul>
                                        <li th:each="cate:${categoriesWithArticles}" th:if="${cate.sort ge 200 && cate.sort lt 300}" th:class="${cate.sort eq 200 ? 'acti' : ''}">[[${cate.name}]]</li>
                                    </ul>
                                </div>
                                <div class="more fr">
                                    <a href="#">更多>></a>
                                </div>
                            </div>
                            <div class="content">
                                <div th:each="cate:${categoriesWithArticles}" th:if="${cate.sort ge 200 && cate.sort lt 300}" th:class="${cate.sort eq 200 ? 'list show' : 'list'}">
                                    <ul>
                                        <li th:each="art:${cate.articles}">
                                            <a href="#">
                                            <span>
                                                [[${art.title}]]
                                            </span>
                                                <i>
                                                    [[${art.date}]]
                                                </i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="fl centerVideo">
                    <div class="common_title">
                        <ul>
                            <li class="active" th:each="cate:${categoriesWithArticles}" th:if="${cate.sort eq 300}"><i class="fa fa-video-camera"></i>&emsp;[[${cate.name}]]</li>
                        </ul>
                    </div>
                    <div style="margin-top: 16px;" th:each="cate:${categoriesWithArticles}" th:if="${cate.sort eq 300}">
                        <img th:each="art:${cate.articles}" th:if="${artStat.index eq 0}" th:src="${art.image}" alt="">
                    </div>
                </div>
                <div class="fl rightcontent">
                    <div class="common_title">
                        <ul>
                            <li class="active" th:each="cate:${categoriesWithArticles}" th:if="${cate.sort eq 400}"><i class="fa fa-briefcase"></i>&emsp;[[${cate.name}]]</li>
                        </ul>
                    </div>
                    <div class="zhibanList">
                        <ul th:each="cate:${categoriesWithArticles}" th:if="${cate.sort eq 400}">
                            <li th:each="art:${cate.articles}">[[${art.title}]]</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="clear">
                <div class="fl leftPart">
                    <div class="news-common2" style="margin-top: 0;" id="nedhg">
                        <div class="news-list">
                            <div class="tit">
                                <div class="tabs fl">
                                    <ul>
                                        <li th:each="cate:${categoriesWithArticles}" th:if="${cate.sort ge 500 && cate.sort lt 600}" th:class="${cate.sort eq 500 ? 'acti' : ''}">[[${cate.name}]]</li>
                                    </ul>
                                </div>
                                <div class="more fr">
                                    <a href="#">更多>></a>
                                </div>
                            </div>
                            <div class="content">
                                <div th:each="cate:${categoriesWithArticles}" th:if="${cate.sort ge 500 && cate.sort lt 600}" th:class="${cate.sort eq 500 ? 'list show' : 'list'}">
                                    <ul>
                                        <li th:each="art:${cate.articles}">
                                            <a href="#">
                                            <span>
                                                [[${art.title}]]
                                            </span>
                                                <i>
                                                    [[${art.date}]]
                                                </i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="fl centerVideo" style="margin-top: 0;width: 320px;">
                    <div class="common_title">
                        <ul>
                            <li class="active" th:each="cate:${categoriesWithArticles}" th:if="${cate.sort eq 600}"><i class="fa fa-bookmark"></i>&emsp;[[${cate.name}]]</li>
                        </ul>
                    </div>
                    <div style="margin-top: 16px;">
                        <div class="zhuanlan">
                            <ul th:each="cate:${categoriesWithArticles}" th:if="${cate.sort eq 600}">
                                <li th:each="art:${cate.articles}"><a href="#"><img th:src="${art.image}" alt="" style="height: 78px;width: 146px;"></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="fl rightcontent" style="margin-top: 0;width: 240px;margin-left: 10px;">
                    <div class="common_title">
                        <ul>
                            <li class="active" th:each="cate:${categoriesWithArticles}" th:if="${cate.sort eq 700}"><i class="fa fa-graduation-cap"></i>&emsp;[[${cate.name}]]</li>
                        </ul>
                    </div>
                    <div class="zhibanList" style="width: 240px;">
                        <ul th:each="cate:${categoriesWithArticles}" th:if="${cate.sort eq 700}">
                            <li th:each="art:${cate.articles}">[[${art.title}]]</li>
                        </ul>
                    </div>
                </div>
            </div>


            <div class="clear">
                <div class="leftPart">
                    <div class="news-common" style="margin-top: 0;">
                        <div class="news-list" style="width: 1200px;height: auto;">
                            <div class="tit">
                                <div class="tabs fl">
                                    <ul>
                                        <li class="acti"><i class="fa fa-link"></i>&emsp;应用导航</li>
                                    </ul>
                                </div>
                                <div class="more fr">
                                    <a href="#"></a>
                                </div>
                            </div>

                        </div>

                        <div class="footUlSelect">
							<ul>
								<li>
									<div class="select">
										<select name="" id="">
											<option value="">兄弟协会</option>
											<option value="">各区市县</option>
											<option value="">各区市县</option>
											<option value="">各区市县</option>
										</select>
									</div>
								</li>

								<li>
									<div class="select">
										<select name="" id="">
											<option value="">各区市县</option>
											<option value="">各区市县</option>
											<option value="">各区市县</option>
											<option value="">各区市县</option>
										</select>
									</div>
								</li>
								<li>
									<div class="select">
										<select name="" id="">
											<option value="">兄弟协会</option>
											<option value="">各区市县</option>
											<option value="">各区市县</option>
											<option value="">各区市县</option>
										</select>
									</div>
								</li>

								<li>
									<div class="select">
										<select name="" id="">
											<option value="">各区市县</option>
											<option value="">各区市县</option>
											<option value="">各区市县</option>
											<option value="">各区市县</option>
										</select>
									</div>
								</li>
							</ul>
							<ul>
								<li>
									<div class="select">
										<select name="" id="">
											<option value="">兄弟协会</option>
											<option value="">各区市县</option>
											<option value="">各区市县</option>
											<option value="">各区市县</option>
										</select>
									</div>
								</li>

								<li>
									<div class="select">
										<select name="" id="">
											<option value="">各区市县</option>
											<option value="">各区市县</option>
											<option value="">各区市县</option>
											<option value="">各区市县</option>
										</select>
									</div>
								</li>
								<li>
									<div class="select">
										<select name="" id="">
											<option value="">兄弟协会</option>
											<option value="">各区市县</option>
											<option value="">各区市县</option>
											<option value="">各区市县</option>
										</select>
									</div>
								</li>

								<li>
									<div class="select">
										<select name="" id="">
											<option value="">各区市县</option>
											<option value="">各区市县</option>
											<option value="">各区市县</option>
											<option value="">各区市县</option>
										</select>
									</div>
								</li>
							</ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer" style="margin-top: 20px;">
        <div class="wid">
            <div class="footer-col">
                <p>
                    <a href="#">网站声明</a>
                    <a href="#">关于我们</a>
                    <a href="#">联系我们</a>
                    <a href="#">后台管理</a>
                    <a href="#">回忆旧版</a>
                </p>
                <p>
                    版权所有：刘安市公安局新都区分局 地址：刘安市局新都区分局
                </p>
                <p>
                    责任人：XXX 维护:XXX 地址：刘安市公安局新都区分局金龙路10号 电话：52720110
                </p>
            </div>
        </div>
    </div>
    <script th:src="@{/liuan/js/jquery.js}"></script>
    <!--jQuery库-->
    <script th:src="@{/liuan/js/wow.min.js}"></script>
    <!--动画效果库-->
    <script th:src="@{/liuan/js/jquery.kxbdmarquee.js}"></script>
    <!--动画效果库-->
    <script th:src="@{/liuan/js/swiper.min.js}"></script><!-- swiper -->
    <script th:src="@{/liuan/js/Epp-2.1.1.min.js}"></script>
    <!--Epp插件库-->
    <!-- <script src="js/ckplayer/ckplayer.js"></script> -->
    <!-- 无缝循环动画库 -->
    <script th:src="@{/liuan/js/jquery.SuperSlide.2.1.3.js}"></script>
    <script type="text/javascript">
    $(".picMarquee-left").slide({ mainCell: ".bd ul", autoPlay: true, effect: "leftMarquee", vis: 5, interTime: 25, trigger: "click" });
    </script>
    <script>
    $("#move1").adFloat({ width: 250, height: 125, top: 60, right: 100 })
    $("#marquee2").kxbdMarquee({ isEqual: false });
    


    $('.news-col .news-list .tit .tabs ul li').hover(function() {
        $(this).addClass('acti').siblings().removeClass('acti');
        var m = $(this).index();
        $('.news-col .news-list .content .list').eq(m).addClass('show').siblings().removeClass('show');
    })


   	$('.news-common .news-list .tit .tabs ul li').hover(function() {
        $(this).addClass('acti').siblings().removeClass('acti');
        var m = $(this).index();
        $('.news-common .news-list .content .list').eq(m).addClass('show').siblings().removeClass('show');
    })


    $('.news-common2 .news-list .tit .tabs ul li').hover(function() {
        $(this).addClass('acti').siblings().removeClass('acti');
        var m = $(this).index();
        $('.news-common2 .news-list .content .list').eq(m).addClass('show').siblings().removeClass('show');
    })

    $('.letter-form .cont .item a').click(function() {
        var i = $(this).index();
        $('.letter-tabel').eq(i).addClass('show').siblings().removeClass('show');
    })
    $('.tabs .txt ul li').click(function() {
        $(this).addClass('acti').siblings().removeClass('acti');
        var o = $(this).index();
        $('.tabs-list').eq(o).addClass('show').siblings().removeClass('show');
    })

    $('.sidebar-nav .tabs ul li').hover(function() {
        // alert(1)
        $(this).addClass('acti').siblings().removeClass('acti');
        var t = $(this).index();
        $('.journalism-sidebar .nav-tabs').eq(t).addClass('show').siblings().removeClass('show');
    })
    $('.introduce-news .tabs ul li').hover(function() {
        $(this).addClass('acti').siblings().removeClass('acti');
        var t = $(this).index();
        $('.introduce-news .item').eq(t).addClass('show').siblings().removeClass('show');
    })
    $('.fix-bann span.close').click(function() {
        $(this).parent('div').fadeOut();
    })
    fade(".news-bann ul li", ".news-bann .pagination span", "3000", "", "");
    roll_picture(".function ul li", "6")
    var u = 0;
    $('.journalism .next').click(function() {
        u++;
        if (u > 3) {
            u = 0;
            $(' .sidebar-link .sidebar-swiper').animate({ "top": -u * 62 + "px" }, 300)
        } else {
            $(' .sidebar-link .sidebar-swiper').animate({ "top": -u * 62 + "px" }, 300)
        }
    })
    $('.journalism .prev').click(function() {
        u--;
        if (u < 1) {
            u = 3;
            $(' .sidebar-link .sidebar-swiper').animate({ "top": u * -62 + "px" }, 300)
        } else {
            $(' .sidebar-link .sidebar-swiper').animate({ "top": u * -62 + "px" }, 300)
        }
    })
    $('.top .top-fr .buttons button').click(function() {
        $('.top-fr').addClass('acti').siblings().removeClass('acti');
    })
    </script>
</body>

</html>